﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="AvailableKPIPage.aspx.cs" Inherits="FBKPI.Pages.AvailableKPIPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        var oTable;
        var oTable2;
        $(document).ready(function () {
            mainmenu("#nav ul", "#nav li");
            mainmenu("#menu_wrap ul", "#menu_wrap li");

            GetSummary();

            $("#tabs").tabs();

            //datatable section
            oTable = $("#KPITable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/AvailableKPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [{
                    "mData": "No", "sWidth": "3%"
                }, {
                    "mData": "Description"
                }


                , {
                    "mData": "GroupKPI"
                }, {
                    "mData": "CategoryKPI"
                }, {
                    "mData": "TypeKPI"
                }, {
                    "mData": "SubTypeKPI"
                }, {
                    "mData": "Periode"
                },

                {
                    "mData": "Weight"
                },

                {
                    "mData": "UoMMax"
                },
                {
                    "mData": "UoMMin"
                }
                , {
                    "mData": "isActive"
                },
                 {
                     "mData": "ID"
                 },
                {
                    "mData": "ID2"
                }

                ],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a href=\"#\" onclick=\"PickKPI('" + oObj.aData["ID"] + "','pick')\"><img src='../images/thumbup.png' /></a>";
                    },
                    "aTargets": [11]
                },
                {
                    "fnRender": function (oObj) {
                        // return "<a href=\"#\" onclick=\"PickKPI('" + oObj.aData["ID"] + "','pick')\"><img src='../images/thumbup.png' /></a>";

                        return '<input type="checkbox" id="' + oObj.aData["ID2"] + '" name="' + oObj.aData["ID2"] + '" />';
                    },
                    "aTargets": [12]
                }

                , {
                    "fnRender": function (oObj) {
                        if (oObj.aData["isActive"] == 'True') {
                            return "<img src='../images/check.png' />"
                        } else {
                            return "<img src='../images/cross.png' />"
                        }
                    },
                    "aTargets": [10]
                },
                {
                    "bVisible": false,
                    "aTargets": [2, 3, 4, 5, 11]
                },
                 {
                     "sClass": "center",
                     "aTargets": [0, 10, 7, 11,12]
                 }]
            });

            //mark selected row
            $('body').on("click", '#KPITable tbody tr', function () {
                $('#KPITable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });

            //--------------------end of mark selected row-----------------------------
            $("#KPITable_length label").after('&nbsp;<button id=\"btnCheckAll\" class="button save" style="left: 0px;" onclick=\'OnPickCheckAll(0);return false;\'>Check All</button>&nbsp;<button id=\"btnUnCheckAll\" class="button delete" style="left: 0px;" onclick=\'OnPickUnCheckAll(0);return false;\'>UnCheck All</button>&nbsp;<button id=\"btnPICK\" class="button add" style="left: 0px;" onclick=\'OnPickKPI(0);return false;\'>Pick KPI</button>');
            //--------------------end of datatable section-----------------------------------------

            //--------------------end of mark selected row-----------------------------
            //$("#KPITable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------


            OnPickKPI = function (code) {
                var selected = new Array();
                $(oTable.fnGetNodes()).find(':checkbox').each(function () {
                    $this = $(this);
                    if ($this.prop('checked')) {
                        selected.push($this.prop('id'));
                    }
                });


                if (selected != "") {

                    if (confirm('Are you sure to pick this KPI?')) {
                        $.ajax({ url: '../ProcessRequest/PickAvailableKPIHandler.ashx?User=' + $("#txt_user").val() + '&KpiIDs=' + selected + "&action=" + "pick", type: "POST",
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(xhr.responseText);
                            },
                            success: function (data) {
                                GetSummary();
                                alert(data);
                                oTable.fnDraw();
                                oTable2.fnDraw();
                                return false;
                            }
                        });
                        return false;
                    }

                }
                else {
                    alert("Pilih satu/lebih KPI untuk Pick !");
                }
                return false;
            }

            OnPickCheckAll = function (code) {

                var selected = new Array();
                $(oTable.fnGetNodes()).find(':checkbox').each(function () {
                    $this = $(this);
                    $this.attr('checked', 'checked');
                });

                return false;
            }

            OnPickUnCheckAll = function (code) {

                var selected = new Array();
                $(oTable.fnGetNodes()).find(':checkbox').each(function () {
                    $this = $(this);
                    $this.attr('checked',false);
                });

                return false;
            }

            PickKPI = function (code, mode) {
                if (mode == 'pick') {
                    if (confirm('Are you sure to pick this KPI?')) {
                        $.ajax({ url: '../ProcessRequest/PickAvailableKPIHandler.ashx?User=' + $("#txt_user").val() + '&KPI=' + code + "&action=" + mode, type: "POST",
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(xhr.responseText);
                            },
                            success: function (data) {
                                GetSummary();
                                alert(data);
                                oTable.fnDraw();
                                oTable2.fnDraw();
                                return false;
                            }
                        });
                        return false;
                    }
                }
                else {
                    if (confirm('Are you sure to unpick this KPI?')) {
                        $.ajax({ url: '../ProcessRequest/PickAvailableKPIHandler.ashx?User=' + $("#txt_user").val() + '&KPI=' + code + "&action=" + mode, type: "POST",
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(xhr.responseText);
                            },
                            success: function (data) {
                                GetSummary();
                                alert(data);
                                oTable.fnDraw();
                                oTable2.fnDraw();
                                return false;
                            }
                        });
                        return false;
                    }
                }
            }


            oTable2 = $("#ListTable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIPIckedSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear2").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [{
                    "mData": "No", "sWidth": "3%"
                }, {
                    "mData": "Description"
                },

                {
                    "mData": "GroupKPI"
                }, {
                    "mData": "CategoryKPI"
                }, {
                    "mData": "TypeKPI"
                }, {
                    "mData": "SubTypeKPI"
                }, {
                    "mData": "Periode"//, "sWidth": "5%"
                },

                {
                    "mData": "Weight"//, "sWidth": "5%"
                },

                 {
                     "mData": "UoMMax"
                 },
                {
                    "mData": "UoMMin"
                }
                ,

                 {
                     "mData": "isActive"//, "sWidth": "8%"
                 }
                ,

                 {
                     "mData": "ID"
                 },
                 {
                     "mData": "ID2"
                 }],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a href=\"#\" onclick=\"PickKPI('" + oObj.aData["ID"] + "','unpick')\"><img src='../images/icon_delete.png' title='UnPick KPI' /></a>";
                    },
                    "aTargets": [11]
                },
                {
                    "fnRender": function (oObj) {
                        // return "<a href=\"#\" onclick=\"PickKPI('" + oObj.aData["ID"] + "','pick')\"><img src='../images/thumbup.png' /></a>";

                        return '<input type="checkbox" id="' + oObj.aData["ID2"] + '" name="' + oObj.aData["ID2"] + '" />';
                    },
                    "aTargets": [12]
                },
                 {
                    "fnRender": function (oObj) {
                        if (oObj.aData["isActive"] == 'True') {
                            return "<img src='../images/check.png' />"
                        } else {
                            return "<img src='../images/cross.png' />"
                        }
                    },
                    "aTargets": [10]
                },
                 {
                     "bVisible": false,
                     "aTargets": [2, 3, 4, 5,11]
                 },
                 {
                     "sClass": "center",
                     "aTargets": [0, 10, 7, 11,12]
                 }]
            });

            //mark selected row
            $('body').on("click", '#ListTable tbody tr', function () {
                $('#ListTable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            //$("#ListTable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear2\" oninput=\'GetList2($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------

            //--------------------end of mark selected row-----------------------------
            $("#ListTable_length label").after('&nbsp;<button id=\"btnUnPickCheckAll\" class="button save" style="left: 0px;" onclick=\'OnUnPickCheckAll(0);return false;\'>Check All</button>&nbsp;<button id=\"btnUnPickUnCheckAll\" class="button delete" style="left: 0px;" onclick=\'OnUnPickUnCheckAll(0);return false;\'>UnCheck All</button>&nbsp;<button id=\"btnUnPICK\" class="button add" style="left: 0px;" onclick=\'OnUnPickKPI(0);return false;\'>UnPick KPI</button>');
            //--------------------end of datatable section-----------------------------------------



        });

        OnUnPickKPI = function (code) {
            var selected = new Array();
            $(oTable2.fnGetNodes()).find(':checkbox').each(function () {
                $this = $(this);
                if ($this.prop('checked')) {
                    selected.push($this.prop('id'));
                }
            });


            if (selected != "") {

                if (confirm('Are you sure to UnPick this KPI?')) {
                    $.ajax({ url: '../ProcessRequest/PickAvailableKPIHandler.ashx?User=' + $("#txt_user").val() + '&KpiIDs=' + selected + "&action=" + "unpick", type: "POST",
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.responseText);
                        },
                        success: function (data) {
                            GetSummary();
                            alert(data);
                            oTable.fnDraw();
                            oTable2.fnDraw();
                            return false;
                        }
                    });
                    return false;
                }

            }
            else {
                alert("Pilih satu/lebih KPI untuk UnPick !");
            }
            return false;
        }

        OnUnPickCheckAll = function (code) {

            var selected = new Array();
            $(oTable2.fnGetNodes()).find(':checkbox').each(function () {
                $this = $(this);
                $this.attr('checked', 'checked');
            });

            return false;
        }

        OnUnPickUnCheckAll = function (code) {

            var selected = new Array();
            $(oTable2.fnGetNodes()).find(':checkbox').each(function () {
                $this = $(this);
                $this.attr('checked', false);
            });

            return false;
        }

        GetList = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable.fnDraw();
                }
            }
            else
            { oTable.fnDraw(); }
        }

        GetList2 = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear2").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable2.fnDraw();
                }
            }
            else
            { oTable2.fnDraw(); }
        }


        GetSummary = function () {
            $.ajax({
                url: "../Serializer/GetPickedKPIandTotalWeightSerializer.ashx?User=" + $("#txt_user").val(),
                success: function (data) {
                    $("#lbl_pickedkpi").text(data.PickedKPI);
                    $("#lbl_totalweight").text(data.TotalWeight + '%');
                },
                error: function (data) {
                    $("#lbl_pickedkpi").text('0');
                    $("#lbl_totalweight").text('0%');
                }
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 525px; overflow: auto;">
        <div id="kpitable">
            <div>
                <div class="customPageHeader">
                    <span class="customPageTitle">Available KPI</span>
                </div>
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">SELECT KPI</a></li>
                        <li><a href="#tabs-2">PICKED LIST</a></li>
                    </ul>
                    <div id="tabs-1">
                        <div class="ui-widget-content">
                            <table cellpadding="0" cellspacing="0" class="display" id="KPITable">
                                <thead>
                                    <tr>
                                        <th>
                                            No
                                        </th>
                                        <th>
                                            KPI Description
                                        </th>
                                        <th>
                                            Group
                                        </th>
                                        <th>
                                            Category
                                        </th>
                                        <th>
                                            Type
                                        </th>
                                        <th>
                                            Sub Type
                                        </th>
                                        <th>
                                            Periode
                                        </th>
                                        <th>
                                            Weight
                                        </th>
                                        <th>
                                            UoM Max.
                                        </th>
                                        <th>
                                            UoM Min.
                                        </th>
                                        <th>
                                            is Active
                                        </th>
                                        <th>
                                            Pick
                                        </th>
                                        <th>
                                            Pick
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="tabs-2">
                        <div>
                            <table cellpadding="0" cellspacing="0" class="display" id="ListTable">
                                <thead>
                                    <tr>
                                        <th>
                                            No
                                        </th>
                                        <th>
                                            KPI Description
                                        </th>
                                        <th>
                                            Group
                                        </th>
                                        <th>
                                            Category
                                        </th>
                                        <th>
                                            Type
                                        </th>
                                        <th>
                                            Sub Type
                                        </th>
                                        <th>
                                            Periode
                                        </th>
                                        <th>
                                            Weight
                                        </th>
                                        <th>
                                            UoM Max.
                                        </th>
                                        <th>
                                            UoM Min.
                                        </th>
                                        <th>
                                            is Active
                                        </th>
                                        <th>
                                            Unpick
                                        </th>
                                        <th>
                                            Unpick
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <div>
                <table width="50%">
                    <tr>
                        <td width="100px">
                            Picked KPI(s)
                        </td>
                        <td width="15px">
                            :
                        </td>
                        <td>
                            <label id="lbl_pickedkpi">
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td width="100px">
                            Total Weight
                        </td>
                        <td width="15px">
                            :
                        </td>
                        <td>
                            <label id="lbl_totalweight">
                            </label>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</asp:Content>
